<template>
	<view>
		<view class="list" v-for="(item,index) in listData" :key="index" @tap="selIndex(index)">
			<view class="ul flex align-center">
				<image class="image" :src="item.image">
				<view class="right">
					<view class="right-title">{{item.title}}</view>
					<view class="right-desc">{{item.desc}}</view>
				</view> 
				<text class="iconfont icon-danxuan1-xuanzhong" v-if="listDataIndex == index"></text>
				<text class="iconfont icon-danxuan1" v-else></text>
			</view>
		</view>
		<view class="sub-button-list flex align-center">
			<view class="list-item list-item1 flex align-center" @tap="previewLog">  
				<view class="sub-button yulan">查看打包记录</view>
			</view>
			<view class="list-item list-item2 flex align-center">
				<view class="sub-button fabu" @tap="down">立即下载</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	
	export default { 
		
		data() {
			return {
				s_id:0,
				mxDatePicker:{
					showPicker: false,
					type: 'range',
					value: [],
					index:-1,
					fileType:0,
				},
				listDataIndex:-1,
				listData:[
					{
						image:'/static/images/export/excel.png',
						title:'Excel表格',
						desc:'导出excel，附件以超链接形式保存'
					},
					{
						image:'/static/images/export/excel_img.png',
						title:'Excel表格(含图)',
						desc:'导出含图片excel，其他附件以链接形式保存'
					},
					{
						image:'/static/images/export/yasuobao.png',
						title:'导出文件',
						desc:'导出图片/视频/音频/文档等文件压缩包'
					}
				]
			}
		},
		onLoad(params) {
			//params.s_id = 17;
			if(params.s_id)
			{
				this.s_id = params.s_id;
			}
		},
		methods: {
			previewLog(){
				this.$api.navigateTo('/pages/form/statistics/list-export-log?s_id='+this.s_id);
			},
			
			down(){
				var that = this;
				var index = that.listDataIndex;
				if(index == -1)
				{
					that.$api.msg('请先选择要下载的数据');return ;
				}
				this.$api.navigateTo('/pages/form/statistics/list-export-select?s_id='+this.s_id+'&excelType='+index);
			},
			selIndex(index){
				if(this.listDataIndex === index)
				{
					this.listDataIndex = -1;
				}else{
					this.listDataIndex = index;
				}
			}
		}
	}
</script>

<style lang="scss">
	.sub-button-list{
		position: fixed;
		width: 100%;
		bottom: 50rpx;
		left: 0;
		.list-item{
			height: 100rpx;
			text-align: center;
			line-height: 80rpx;
		}
		.list-item1{
			width:50% ;
		}
		.list-item2{
			width:50% ;
		}
		.sub-button{
			letter-spacing: 2rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			border-radius: 50rpx;
		}
		.yulan{
			width: 80%;
			border: 2rpx solid $uni-btn-color;
			background: #ffffff;
			height: 80rpx;
			margin: 0 10%;
			color: $uni-btn-color;
		}
		.fabu{
			width: 97%;
			background: $uni-btn-color;
			margin-right: 3%;
			color:#FFFFFF;
		}
	}
	.list{
		width: 94%;
		margin: 20rpx auto;
		height: 160rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.ul{
			height: 100%;
			position: relative;
			.iconfont{
				font-size: 54rpx;
				color: $uni-btn-color;
				position: absolute;
				top: 28px;
				right: 15px;
			}
			.image{
				width: 90rpx;
				height: 90rpx;
				margin: 0 10rpx;
			}
			.right{
				.right-title{
					height: 50rpx;
					font-size: 30rpx;
					font-weight: 600;
				}
				.right-desc{
					font-size: 24rpx;
					color: #999999;
				}
				
			}
		}
	}
</style>
